<template>
  <view>
    <slider
      :value="incrementCount"
      @change="sliderChange"
      :min="min"
      :max="max"
      show-value
      activeColor="#22b229"
    />
    <view class="addAndMinus">
      <image
        class="Temp_minus"
        @tap="isRendering ? '' : TempMinus()"
        src="https://mkservice.mk-iot.com/subFile/mk2240/del.png"
      />
      <image
        class="Temp_add"
        @tap="isRendering ? '' : TempAdd()"
        src="https://mkservice.mk-iot.com/subFile/mk2240/add.png"
      />
    </view>
  </view>
</template>

<script>
  import getPrefixAndControl from '../../util/getPrefixAndControl'
  export default {
    props: {
      currentValue: {
        type: Number,
        default: 0,
      },
      currState: {
        type: Number,
      },
      min: {
        type: Number,
      },
      max: {
        type: Number,
      },
    },
    data() {
      return {
        AutoCurve: 11,
        isRendering: false,
        increment: this.currentValue,
      }
    },
    computed: {
      incrementCount() {
        //当新定义的变量变更时，计算属性也会自动更新
        return this.increment
      },
    },
    methods: {
      sliderChange(e) {
        this.increment = e.detail.value
        //下发命令
        this.controlCommon(this.currState, this.increment)
      },
      //温度值+1
      TempAdd() {
        if (this.increment + 1 > this.max) {
          uni.showToast({
            title: '不能高于设置的最大值',
            icon: 'none',
          })
        } else {
          this.preventClick(this.isRendering)
          this.increment += 1
          //下发命令
          this.controlCommon(this.currState, this.increment)
        }
      },
      //温度值-1
      TempMinus() {
        if (this.increment - 1 < this.min) {
          uni.showToast({
            title: '不能低于设置的最小值',
            icon: 'none',
          })
        } else {
          this.preventClick(this.isRendering)
          this.increment -= 1
          //下发命令
          this.controlCommon(this.currState, this.increment)
        }
      },
      //防止多次点击共用方法
      preventClick(isClick) {
        if (!isClick) {
          this.isRendering = true
          setTimeout(() => {
            this.isRendering = false
          }, 500)
        }
      },
      //下发的公共方法
      controlCommon: async function (currState, value) {
        //下发命令
        if (currState == 1) {
          this.$parent.autoCurveDataPak.xf1Humidity = value
        } else {
          this.$parent.autoCurveDataPak.xf2Humidity = value
        }
        this.$parent.loadingClick()
        const success = await getPrefixAndControl.controlCmd(
          this.$parent.equipmentTypeId,
          this.$parent.equipmentNo,
          this.AutoCurve,
          this.$parent.getAutoCurveArray()
        )
        if (success.code != 200) {
          this.$modal.msgError('下发失败')
        }
      },
    },
  }
</script>

<style>
  .addAndMinus {
    display: flex;
    justify-content: space-between;
    margin-top: 30rpx;
  }
  .Temp_add {
    width: 80rpx;
    height: 80rpx;
  }
  .Temp_minus {
    width: 80rpx;
    height: 80rpx;
  }
</style>
